<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法1插值表达式,data,methods,computed,watch</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <h1 style="color: brown;">知识点一：插值表达式</h1>
        <p>第一个变量数据在里展示：{{msg}}</p>
        <!--{{}}插值表达式的符号-->
        <p>我是可以进行计算的表达式{{num+1}}</p>
        <p>我也可以进行条件运算符：{{1+1==2?'ok':'no'}}</p>
        <p>我也可以放一些函数:{{add()}}</p>
        <h1 style="color: brown;">知识点二：data</h1>
        <h3> 我们可以在控制台中通过实例名，$data的形式来访问或者修改data中数据</h3>
        <h1>知识点三：methods</h1>
        <h3> 创建方法的格式：方法名（）{} 或 方法名：function(){}</h3>
        <h3>通过调用方法可以实现比较复杂的一些代码</h3>
        <P>调用函数：{{sub(9999)}}</P>
        <h1 style="color: burlywood;">知识点四：computed  计算属性</h1>
        <h3>当我们在插值表达式里面或者方法里面进行复杂逻辑的时候，vue提倡我们使用computed计算属性
            ,我们可以完成比较各种复杂的逻辑，包括逻辑运算，函数调用等，最后返回一个结果就可以了</h3>
    <p>{{rev}}</p>
         <!--计算属性在页面调用时，后面不加括号-->   
         <p>{{ revMethods()}}</p>
         <h3>计算属性时基于其依赖的变量进行缓存的，只有它依赖的变量发生改变，才会重新求值，而方法是每次页面渲染（刷新）时都会重新计算</h3>
         <h3>计算机属性通常是只读的，不能进行修改</h3>
         <h1 style="color: blue;">知识点五：watch监听</h1>
         <h3>当我们需要在某种状态变化时，执行其他操作，watch具有状态监听功能
            只要监听到当前vue实例中数据变化，就会调用当前数据绑定的方法
         </h3>
         <h4>1.函数侦听器：在watch中申明的函数即为函数式侦听器，其中函数名就是我们要侦听的数据源头/</h4>
         <h4> 2.对象式侦听器：在watch中声明的对象即为对象式侦听器，其对象名就是我们要侦听的数据源</h4>
        </div>

</body>
</html>
<script>
    const appConn = Vue.createApp({
        //data里面放置全部数据，包括变量，对象的等
        data() {
            return {
              msg:'我的第一个vue界面！',//这个创还能字符串变量,
              num:1,
              grade:60,
              users:{
                    name:'lq',
                    age:18
              }
            }
        },
        //metods里面的是全部方法（函数），这个方法不带参数
        methods: {
            //创建一个累加函数
            add(){
                return this.num+100
            },
            //创建一个带参数的方法
            sub:function(val){
                return this.num + val
            },
            //也可以写成sub(val){}


            revMethods(){
                console.log("我是方法，我被调用了一次");
                return this.msg.split('').reverse().join('')
            }
        },
        computed:{
            //在此处放置计算属性
            rev(){
                console.log("我是计算属性，我被调用了一次");
                return this.msg.split('').reverse().join('')
            }
        },
        watch:{
            //函数式侦听器
            grade(newData,oldData){
         console.log("改变前数据"+oldData);
         console.log("改变后数据"+newData);
         if(newData>oldData)
             console.log("你哼棒");
        else
            console.log("同志还需努力");    
        },
        //对象式侦听器
        'users.age':{
            handler(newData,oldData){
                console.log("改变前年龄"+oldData);
                console.log("改变后年龄")+newData;
                if(newData>=120 || newData<0){
                    console.log("你确定你输入的年龄？");
                }
            }
        }
        }
    }).mount("#app")
</script>